<template>
	<div class="kp-rpblist" v-bind:style="{ height: pageHeight+'px' }">
		<div v-if="list.length>0">
			<v-refresh :on-refresh="onRefresh">
				<v-reload :on-infinite-load="onInfiniteLoad" :parent-pull-up-state="infiniteLoadData.pullUpState">
					<div class='listcon'>
						<div class="rpblist_flex rpblist_item" v-for="(item,index) in list" :class="item.frozenStatus==1?'rpblist_state1':'rpblist_state2'">
							<div class='rpblist_left'>
								<div class='rpblist_use'>{{item.redEnvelopeName}}</div>
								<div class='rpblist_data'>{{item.visualTime}}</div>
							</div>
							<div class='rpblist_right'>
								<span class='rpblist_expenditure' v-if="item.redEnvelopeStatus==2">- {{item.redEnvelopeMoney}}</span>
								<span class='rpblist_income' v-else>+{{item.redEnvelopeMoney}}</span>
							</div>
						</div>
					</div>
				</v-reload>
			</v-refresh>
		</div>
		<div class='rpblist_img' v-else>
			<img src='http://h5.kpcx179.com/wximages/wallet/recode.png' />
		</div>
	</div>
</template>

<script>
	import { mapState } from "vuex";
	import DropDownRefresh from '@/components/DropDownRefresh'
	import PullUpReload from '@/components/PullUpReload'
	export default {
		data() {
			return {
				infiniteLoadData: {
					initialShowNum: 10,
					pullUpState: 0, // 子组件的pullUpState状态
					showPullUpListLength: this.initialShowNum, // 上拉加载后所展示的个数
				},
				index: 1,
				list: [],
				pageHeight: '',
			}
		},
		mounted() {
			var h = document.documentElement.clientHeight || document.body.clientHeight;
			this.pageHeight = h;
			this.getrpblist();
		},
		methods: {
			getrpblist() {
				let that = this;
				let param = {
					"userID": '',
					"pageNum": that.index
				};
				this.$http.get(this.$baseUrl.baseurl + "kpcx/appMyWallet/redEnvelopeDetail", param).then((res) => {
					if(res.data.Code == "0") {
						if(res.data.Result.redEnvelopeDetailList.length != 0) {
							let list = res.data.Result.redEnvelopeDetailList;
							list && list.forEach((item)=>{
								item.redEnvelopeMoney = item.redEnvelopeMoney.toFixed(2);
							})
							that.list.push(...list);
						} else {
							this.infiniteLoadData.pullUpState = 3;
						}
					}
				}).catch((err) => {
					console.log(err);
				})

			},
			onRefresh(done) { // 下拉刷新
				// 如果下拉刷新和上拉加载同时使用，下拉时初始化上拉的数据

				this.list = [];
				this.getrpblist(1)
				done() // call done
			},
			onInfiniteLoad(done) { // 上拉加载
				if(this.infiniteLoadData.pullUpState === 0) {
					this.index++;
					this.getrpblist(this.index);
				}
				done()
			},

		},
		created() {

		},
		watch: {

		},
		components: {
			'v-refresh': DropDownRefresh,
			'v-reload': PullUpReload
		},
		computed: {
			...mapState({
				cityinfo: state => state.common.cityinfo,
			})
		}
	};
</script>
<style scoped>
	html,body{
		height: 100%;
	}
	.kp-rpblist {
		padding-top: 86px;
		background: #fff;
		height: 100%;
		box-sizing: border-box;
	}
	
	.rpblist_flex {
		display: flex
	}
	
	.rpblist_item {
		height: 144px;
		justify-content: space-between;
		padding: 0 30px;
		align-items: center;
		border-bottom: 1px solid #efefef;
	}
	
	.rpblist_use {
		font-size: 28px;
	}
	
	.rpblist_data {
		font-size: 24px;
		margin-top: 18px;
	}
	
	.rpblist_right {
		font-size: 28px;
	}
	
	.rpblist_state1 {
		color: #b7b7b7
	}
	
	.rpblist_state2 {
		color: #444444
	}
	
	.rpblist_img {
		text-align: center;
		padding-top: 150px;
	}
	
	.rpblist_img img {
		width: 400px;
	}
	.listcon{
		background: #fff;
	}
	
</style>